<template>
	<view class="container">
		<view class="u1">
			<view class="sousuo">
				<icon size="16" type="search" @tap="searchNow($event)"></icon>
				<input type="text" value="" placeholder="请输入公司最高等级资质" focus="true" v-model="text" @confirm="searchNow($event)" />
			</view>
			<view class="cancel" @click="before">取消</view>
		</view>
		<view class="searchBotBox">
			<view class="ov">
				<view class="shan">
					<view class="fl">搜索历史</view>
				</view>
				<view @tap="clearHistory" class="fr grace-more-r grace-search-remove">清空历史</view>
			</view>
			<view class="searchHistoryBox">
				<view class="searchHistoryBoxItem" v-for="(item, index) in searchKey" :key="index" @click="goSearch(item)">
					<icon size="16" type="search"></icon><text>{{ item }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKey:[
				'建筑工程施工总承包特级',
				'水利水电工程施工总承包贰级',
				'市政公用工程施工总承包特级'
			],
			text:''
		};
	},
	onLoad() {
		uni.getStorage({
			key: 'searchLocal',
			success: res => {
				if (res.data != '') {
					console.log(JSON.parse(res.data));
					//把字符串转换为对象
					this.searchKey = JSON.parse(res.data);
				}
			},
			fail: err => {
				console.log(err);
			}
		});
	},
	methods: {
		before(){
			this.text = ''
		},
		searchNow(e, val) {
			var that = this;
			val = that.text.trim()//清除空格
			//清除搜索字的显示隐藏
			that.jiaodian = false;
			if (val == '') {
				uni.showToast({
					title: '未输入搜索关键字',
					icon: 'none',
					duration: 1000
				});
				return false;
			}
			var newArr = that.searchKey;
			//如果有搜索相同的话，先删除，再添加新的
			if (that.searchKey.indexOf(that.text) == -1) {
				newArr.unshift(that.text);
			}
			//超过11个就删除最后一个，保留11个
			if (newArr.length >= 11) {
				newArr.pop();
			}
			newArr = JSON.stringify(newArr); //转换成json格式的数据
			uni.setStorage({
				//将搜索的值添加到本地缓存
				key: 'searchLocal',
				data: newArr
			});
			// //请求搜索接口
			// uni.request({
			// 	url: serverUrl + '/search',
			// 	method: 'POST',
			// 	data: {
			// 		key_word: that.text,
			// 		uid: that.uid
			// 	},
			// 	success: res => {
			// 		console.log(res.data.data);
			// 		this.text = '';
			// 	}
			// });
			//点击直接去搜索
			this.goSearch(this.text);
		},
		goSearch(item) {
			uni.navigateTo({
				url: '/pages/document/list?title=' + item
			})
		},
		getSearchHistory(){
			that.searchKey =[]
			uni.setStorage({
				key: 'searchLocal',
				data: that.searchKey
			});
			//点击确定删除搜索历史
			// uni.request({
			// 	url: serverUrl + '/del_history',
			// 	method: 'POST',
			// 	success: () => {
			// 		that.searchKey = [];
			// 	    uni.setStorage({
			// 		 	key: 'searchLocal',
			// 		 	data: that.searchKey
			// 		});
			// 	}
			// });
		},
		clearHistory() {
			var that = this;
			var serverUrl = that.serverUrl;
			uni.showModal({
				title: '提示',
				content: '点击确定将删除所有历史信息，确定删除吗？',
				success: function(res) {
					that.searchKey =[]
				}
			});
		}
	},
};
</script>

<style lang="less">

.container{
	padding:10upx;
}
.u1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx;
	border-bottom: 1px solid #F5F5F5;
	.sousuo {
		display: flex;
		position: relative;
		width: 570upx;
		height: 60upx;
		align-items: center;
		background-color: #f7f7f7;
		margin-left: 40upx;

		input {
			font-size: 24upx;
			width: 570upx;
			text-indent: 1rem;
			line-height: 60upx;
			padding-left: 8upx;
		}
		icon {
			margin-left: 20upx;
		}
	}

	.cancel {
		height: 26upx;
		font-size: 28upx;
		color: #5dd4a5;
		line-height: 10upx;
	}
}

page {
	background: #fff;
}

.ov {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	margin-bottom:20upx;
}

.fl {
	float: left;
	font-family: PingFang-SC-Medium;
	font-size: 28upx;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0px;
	color: #232323;
}

.shan {
	display: flex;
	justify-content: space-between;
}

.shan image {
	width: 25upx;
	height: 29upx;
	border: 1px solid red;
}

.fr {
	float: right;
	color:#5dd4a5;
	font-size: 28upx;
	font-weight: 500;
}

.fr image {
	width: 35upx;
	height: 37upx;
}

.searchTopBox {
	width: 100%;
	background-color: #0b877f;
	height: 100upx;
	box-sizing: border-box;
	padding-top: 15upx;
}

.searchBoxRadius {
	width: 90%;
	height: 70upx;
	background-color: #fff;
	margin-left: 5%;
	overflow: hidden;
	border-radius: 35upx;
}

.searchBoxIcon {
	font-size: 40upx;
	margin-top: 20upx;
	margin-left: 20upx;
	float: left;
}

.searchBoxIpt {
	height: 70upx;
	line-height: 70upx;
	margin-left: 20upx;
	float: left;
}

.searchBotBox {
	width: 100%;
	margin-top: 30upx;
	padding: 15upx 3%;
	box-sizing: border-box;
}

.searchHistoryBox {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.searchHistoryBoxItem {
	icon{
		margin:20upx;
	}
	font-size:26upx;
	border-bottom:1px solid #F5F5F5;
	// padding-left:30upx;
	line-height:20upx;
	text{
		line-height:20upx;
		font-size:24upx;
	}
}
</style>
